<template>
  <div class="v-flex bst-operate">
    <!-- 增删改查 -->
    <div v-for="(group, i) in operateGroup" class="operate-group-item v-flex">
      <v-input
        v-if="group.params === 'val'"
        class="bst-input"
        line
        v-model="group.value"
        :ref="(component) => receiveInput(component, group)"
        :type="group.type"
        :label="group.name"
        :rules="group.rules"
        @keydown.enter="handleClick(group)"
      ></v-input>
      <div v-else class="bst-input"></div>
      <v-btn class="bst-btn" :value="group.name" @click="handleClick(group)"></v-btn>
    </div>
  </div>
  <transition mode="out-in">
    <div class="bst-hint">
      <p v-if="controller.showSearch" class="bst-hint-color">
        Found: {{ bstHint.search }}
      </p>
      <p v-if="controller.showMax" class="bst-hint-color">最大值: {{ bstHint.max }}</p>
      <p v-if="controller.showMin" class="bst-hint-color">最小值: {{ bstHint.min }}</p>
      <p v-if="controller.showPreOrderTraversal" class="bst-hint-color">
        先序遍历: {{ bstHint.preOrderTraversal }}
      </p>
      <p v-if="controller.showMidOrderTraversal" class="bst-hint-color">
        中序遍历: {{ bstHint.midOrderTraversal }}
      </p>
      <p v-if="controller.showPostOrderTraversal" class="bst-hint-color">
        后序遍历: {{ bstHint.postOrderTraversal }}
      </p>
    </div>
  </transition>
  <div class="tree-wrapper v-flex">
    <div>
      <binary-search-tree-item
        v-if="tree.root"
        root
        :ref="handleReceiveRoot"
        :node="tree.root"
        :pass-node="passNode"
      ></binary-search-tree-item>
    </div>
  </div>
</template>

<script lang="ts">
import { defineComponent, provide, inject } from "vue";
import Input from "@/components/Input.vue";
import Button from "@/components/Button.vue";
import BinarySearchTreeItem from "@/components/tree/BinarySearchTreeItem.vue";
import { IMessage } from "@/interface/IUse";
import { useBST } from '@/use/UseBST.ts';

export default defineComponent({
  name: "BinarySearchTree",
  components: {
    "v-input": Input,
    "v-btn": Button,
    BinarySearchTreeItem,
  },
  setup(props, context) {
    const $message: IMessage = inject("message") as IMessage;

    const use = useBST(props, context, { $message });
    provide("tree", use.tree.value);

    return { ...use };
  },
});
</script>

<style scoped>
.bst-input {
  width: 50%;
  margin-right: 20px;
}
.bst-btn {
  flex-grow: 1;
}
.bst-hint-color {
  color: #555;
  font-size: 12px;
}
.bst-hint {
  height: 57px;
  padding: 20px;
}
.bst-operate {
  flex-wrap: wrap;
  justify-content: flex-start;
}
.operate-group-item {
  width: 23%;
  margin-right: 10px;
  justify-content: space-around;
  margin-bottom: 10px;
}
.tree-wrapper {
  width: 100%;
  justify-content: center;
}
</style>
